<template>
	<view>
		<view class="work-img">
			<img src="../../static/img1.jpg" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="applicate-container">
			<view class="applicate-content" v-for="(item,index) in applicateList" :key="index">
				<view class="ac-top" >
					<view class="ac-title">
						<view class="ct-left">{{item.courseName}}</view>
					     <view class="ct-course">总课时：{{item.hour}}课时</view>
						 <view class="ct-course" style="margin-top: 10rpx;">开课日期：{{item.startTime}}</view>
					</view>
						<view class="ct-course" style="margin-top: 10rpx;" @click="checkDetails(item)">签到详细<u-icon name="arrow-right"></u-icon></view>
						
				</view>
				
					<view class="applicate-space"></view>
					<view class="ac-content">
						<view class="ac-residue">
							<view class="cr-top">{{item.leftHour}}</view>
							<view class="cr-bottom">(剩余课时)</view>
						</view>
						<view class="ac-residue">
							<view class="cr-top">1</view>
							<view class="cr-bottom">(赠送课时)</view>
						</view>
						<view class="ac-residue">
							<view class="cr-top">{{item.useHour}}</view>
							<view class="cr-bottom">(已上)</view>
						</view>
						
						<view class="ac-residue">
							<view class="cr-top">{{item.status == 0 ? '开课' : item.status == 1?'听课' : '结课'}}</view>
							<view class="cr-bottom">(状态)</view>
						</view>
					</view>
					<view class="applicate-space"></view>
					<view class="ac-content" style="padding-bottom: 20rpx; justify-content: start;">
						<view class="ac-residue">
							<view class="cr-top">{{item.askLeaveNumber}}</view>
							<view class="cr-bottom">(剩余请假)</view>
						</view>
					<view class="ac-residue" style="width: 160px; text-align: center;" >
						<view class="cr-top" >{{item.stopTime}}</view>
						<view class="cr-bottom">(结束日期)</view>
					</view>
						
					</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import {getApplicationCourseList} from '@/utils/api.js'
	export default {
		data() {
			return {
				applicateList:[],
				
			}
		},
		onLoad() {
			this.getApplicationCourseList()
		},
		methods: {
			async getApplicationCourseList() {
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1
				}
				const res = await getApplicationCourseList(data)
				if (res.code == 200) {
					uni.hideLoading()
					this.applicateList = res.rows
				}
			},
			checkDetails(item){
				console.log(item.traineeId.toString(),"item.traineeId");
				uni.navigateTo({
					url: '/pages/course/checkDetails?id=' + item.traineeId + '&courseName=' + item.courseName
				})
			}
		}
	}
</script>

<style>
.work-img{
	width: 100%;
	height: 250rpx;
}
.applicate-container{
	width: 100%;
	position: absolute;
	top: 180rpx;
	left: 50%;
	transform: translateX(-50%);
	
}
.applicate-content{
	width: 95%;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 16rpx;
	/* padding: 10rpx; */
}
.ac-top{
	margin-top: 30rpx;
    padding:  20rpx;
	display: flex;
	justify-content: space-between;
}
.ct-left{
	font-weight: bold;
	font-size: 34rpx;
}
.ct-course{
	color: #999999;
	font-size: 26rpx;
	margin-top: 20rpx;
}
.applicate-space{
	width: 100%;
	height: 2rpx;
	background-color: #f6f6f6;
	margin: 20rpx 0;
}
.ac-content{
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
}
.ac-residue{
	width: 150rpx;
	text-align: center;
}
.cr-bottom{
	color: #999999;
	font-size: 26rpx;
}
</style>
